<script setup>
import { ref, watch } from 'vue';

import {
  getOrgUseInfo,
  getUseInfoAllByType,
} from '#/api/largeVisualScreen/smallProgram';

const props = defineProps({
  data: {
    type: Object,
    required: true,
  },
});

const config = ref({
  header: [
    '归属分行',
    '协会名称',
    '协会积分',
    '协会人数',
    '活动数量',
    '论坛发布量',
  ],
  data: [],
  align: ['center', 'center', 'center', 'center', 'center', 'center', 'center'],
  headerBGColor: '#0f1325',
  columnWidth: [80],
  index: true,
  headerHeight: 35,
  rowNum: 8,
});

// 更新表格数据
const updateTableData = () => {
  if (!props.data?.associations) return;

  config.value.data = props.data.associations.map((item) => [
    item.branch || '-',
    item.name || '-',
    item.score?.toString() || '0',
    item.memberCount?.toString() || '0',
    item.activityCount?.toString() || '0',
    item.postCount?.toString() || '0',
  ]);
};

// 监听数据变化
watch(
  () => props.data,
  (newVal) => {
    if (newVal) {
      updateTableData();
    }
  },
  { immediate: true },
);

getOrgUseInfo().then((res) => {
  console.log('各协会使用情况数据', res);
});

getUseInfoAllByType('6').then((res) => {
  console.log('根据类型使用情况', res);
});
</script>

<template>
  <dv-border-box-13 class="box">
    <div class="title">使用情况(各协会)</div>
    <dv-scroll-board
      :config="config"
      style="width: 100%; height: calc(100% - 50px)"
    />
  </dv-border-box-13>
</template>

<style lang="scss" scoped>
.box {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 15px 20px 10px;

  .title {
    margin: 5px 0 16px;
    font-size: 16px;
    color: #fff;
    text-align: center;
  }
}
</style>
